<template>
  <view class="com-footer-container">
    <view class="position">
      <view
        class="tabberItem"
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ 'tab-ac': tabIdx == index, nHide: item.isHidden }"
        @click.stop="navToTabPage(index, item)"
        v-if="item.show"
      >
        <image
          :src="tabIdx == index ? item.imgAc : item.imgDefault"
          mode="scaleToFill"
        ></image>
        <text>{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabIdx: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      activeIndex: 4,
      tabList: [
        {
          path: "/pages/home/home/index",
          imgDefault: "/static/images/tabbar/tab-home-page.png",
          imgAc: "/static/images/tabbar/tab-icon-home-pre.png",
          title: "首页",
          keyIndex: 0,
          show: true,
        },
		{
		  // path: "/pages/earnings/index",
		   path: "/pages/terminal/index",
		  imgDefault: "/static/images/tabbar/tab-terminal.png",
		  imgAc: "/static/images/tabbar/tab-icon-terminal-pre.png",
		  title: "终端",
		  keyIndex: 1,
		  show: true,
		},
        {
          // path: "/pages/data/index",
		  path: "/pages/data/index",
          imgDefault: "/static/images/tabbar/tab-data.png",
          imgAc: "/static/images/tabbar/tab-icon-data-pre.png",
          title: "数据",
          keyIndex: 2,
          show: true,
        },
        
        {
          keyIndex: 3,
          show: true,
          path: "/pages/myInfo/index",
          imgDefault: "/static/images/tabbar/tab-profile.png",
          imgAc: "/static/images/tabbar/tab-icon-profile-pre.png",
          title: "我的",
        },
      ],
    };
  },
  methods: {
    toShare() {
      this.$nav.push({
        path: "/pages/home/invitation/index",
      });
    },
    navToTabPage(idx, item) {
      uni.hideTabBar({});
      if (idx != this.tabIdx && !item.isHidden) {
        uni.switchTab({
          url: this.tabList[idx].path,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: $themeColor;
}
.nHide {
  visibility: hidden;
}
.com-footer-container {
  height: 98rpx;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  border-top: 1rpx solid #eee;
  z-index: 10000;
  box-sizing: border-box;
  .position {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-items: center;
    position: relative;
    .tabberItem {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 24rpx;
      color: #999;
      position: relative;

      image {
        width: 44rpx;
        height: 44rpx;
        margin-bottom: 2rpx;
      }

      &.tab-ac {
        color: $themeColor;
      }
    }
    .share-box {
      position: absolute;
      left: 50%;
      margin-left: R(-62);
      top: R(-50);
      .icon {
        width: R(124);
        height: R(124);
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f7ff;
        box-sizing: border-box;
        border: R(6) solid #fff;
        image {
          width: R(110);
          height: R(110);
        }
      }
      .text {
        font-size: R(22);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #b0b0b0;
        text-align: center;
      }
    }
  }
}

.angle-box {
  position: absolute;
  left: 80rpx;
  top: 6rpx;
}
</style>
